<template>
  <div>
    <!-- 评论框 -->
    <div style="margin-bottom: 40px">
      <div class="comment-head">
        <i class="el-icon-edit-outline" style="font-weight: bold;font-size: 22px;"></i> 留言
      </div>
      <div>
        <!-- 文字评论 -->
        <div v-show="!isGraffiti">
          <commentBox @showGraffiti="isGraffiti = !isGraffiti"
                      @submitComment="submitComment">
          </commentBox>
        </div>
        <!-- 画笔 -->
<!--        <div v-show="isGraffiti">-->
<!--          <graffiti @showComment="isGraffiti = !isGraffiti"-->
<!--                    @addGraffitiComment="addGraffitiComment">-->
<!--          </graffiti>-->
<!--        </div>-->
      </div>
    </div>


    <!-- 评论内容 -->
    <div v-if="comments.length > 0">
      <!-- 评论数量 -->
      <div class="commentInfo-title">
        <span style="font-size: 1.15rem">Comments | </span>
        <span>{{ total }} 条留言</span>
      </div>
      <!-- 评论详情 -->
      <div id="comment-content" class="commentInfo-detail"
           v-for="(item, index) in comments"
           :key="index">
        <!-- 头像 -->
        <el-avatar shape="square" class="commentInfo-avatar" :size="35" :src="item.avatar"></el-avatar>

        <div style="flex: 1;padding-left: 12px">
          <!-- 评论信息 -->
          <div style="display: flex;justify-content: space-between">
            <div>
              <span class="commentInfo-username">{{ item.createBy }}</span>
              <span class="commentInfo-master" v-if="item.userId === userId">主人翁</span>
<!--              <span class="commentInfo-other">{{ getDateDiff(item.createTime) }}</span>-->
              <span class="commentInfo-other">{{ item.createTime }}</span>

            </div>
            <div class="commentInfo-reply" @click="replyDialog(item, item)">
              <span v-if="item.childComments.total > 0">{{item.childComments.length}} </span><span>回复</span>
            </div>
          </div>
          <!-- 评论内容 -->
          <div class="commentInfo-content">
            <span v-html="item.commentContent"></span>
          </div>
          <!-- 回复模块 -->
          <div v-if="!isEmpty(item.childComments)">
            <div class="commentInfo-detail" v-for="(childItem, i) in item.childComments" :key="i">
              <!-- 头像 -->
              <el-avatar shape="square" class="commentInfo-avatar" :size="30" :src="childItem.avatar"></el-avatar>

              <div style="flex: 1;padding-left: 12px">
                <!-- 评论信息 -->
                <div style="display: flex;justify-content: space-between">
                  <div>
                    <span class="commentInfo-username-small">{{ childItem.createBy }}</span>
                    <span class="commentInfo-master" v-if="childItem.userId === userId">主人翁</span>
                    <span class="commentInfo-other">{{childItem.createTime}}</span>
                    <span class="commentInfo-other" v-if="childItem.parentCommentId !== item.id "><el-icon style="margin-left: 3px;margin-right: 3px"><CaretRight /></el-icon>{{childItem.parentName}}</span>

                    <!--                    <span class="commentInfo-other">{{getDateDiff(childItem.createTime) }}</span>-->
                  </div>
                  <div>
                    <span class="commentInfo-reply" @click="replyDialog(childItem, item)">回复</span>
                  </div>
                </div>
                <!-- 评论内容 -->
                <div class="commentInfo-content">
<!--                  <template v-if="childItem.parentCommentId !== item.id &&-->
<!--                                  childItem.parentUserId !== childItem.userId">-->
<!--                    <span style="color: var(&#45;&#45;blue)">@{{ childItem.parentUsername }} </span>:-->
<!--                  </template>-->
                  <span v-html="childItem.commentContent"></span>
                </div>
              </div>
            </div>
<!--            &lt;!&ndash; 分页 &ndash;&gt;-->
<!--            <div class="pagination-wrap" v-if="item.childComments.records.length < item.childComments.total">-->
<!--              <div class="pagination"-->
<!--                   @click="toChildPage(item)">-->
<!--                展开-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <proPage :current="pagination.current"
               :size="pagination.size"
               :total="pagination.total"
               :buttonSize="6"
               :color="$constant.commentPageColor"
               @toPage="toPage">
      </proPage>
    </div>

    <div v-else class="myCenter" style="color: var(--greyFont)">
      <i>来发第一个留言啦~</i>
    </div>



<!--      <div>-->
<!--        <comment-item-->
<!--          v-for="comment in comments"-->
<!--          :key="comment.id"-->
<!--          :comment="comment"-->
<!--          :level="0"-->
<!--        />-->
<!--      </div>-->

    <el-dialog title="留言"
               v-model="replyDialogVisible"
               width="30%"
               :before-close="handleClose"
               :append-to-body="true"
               destroy-on-close
               center>
      <div>
        <commentBox :disableGraffiti="true"
                    @submitComment="submitReply">
        </commentBox>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import commentBox from "@/views/weblogFront/commentBox/index.vue"
import proPage from "@/views/weblogFront/common/proPage.vue";
import {onMounted, ref} from "vue";
import {ElMessage, ElNotification} from "element-plus";
import {faceReg, getDateDiff, isEmpty, pictureReg} from "@/utils/common";
import $constant from "@/utils/constant"
import {addComment, listComment} from "@/api/weblog/comment";
import CommentItem from "@/views/weblogFront/comment/CommentItem.vue";
import {getToken} from "@/utils/auth";
  // const graffiti = () => import( "./graffiti");
const props = defineProps({
  source: {
    type: Number
  },
  type: {
    type: String
  },
  userId: {
    type: Number
  }
});

const isGraffiti = ref(false);
const total = ref(0);
const replyDialogVisible = ref(false);
const floorComment = ref({});
const replyComment = ref({});
const comments = ref([]);
const pagination = ref( {
  pageNum: 1,
    pageSize: 10,
    source: undefined,
    type: undefined,
    parentCommentId: undefined,
    userId: undefined,
    floorCommentId: undefined,
    parentUserId: undefined,
    likeCount: undefined,
    commentContent: undefined,
    commentInfo: undefined,
})

function toPage(page) {
  pagination.value.current = page;
  window.scrollTo({
    top: document.getElementById('comment-content').offsetTop
  });
  getComments(pagination.value);
}

function getTotal() {
  debugger
  listComment({source: props.source, type: props.type})
    .then((res) => {
      if (!isEmpty(res.data)) {
        props.total = res.data;
      }
    })
    .catch((error) => {
      ElMessage({
        message: error.message,
        type: "error"
      });
    });
}
function toChildPage(floorComment) {
  floorComment.childComments.current += 1;
  let pagination = {
    current: floorComment.childComments.current,
    size: 5,
    total: 0,
    source: props.source,
    type: props.type,
    floorCommentId: floorComment.id
  }
  getComments(pagination, floorComment, true);
}

function emoji(comments, flag) {
  comments.forEach(c => {
    c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
    c.commentContent = faceReg(c.commentContent);
    c.commentContent = pictureReg(c.commentContent);
    if (flag) {
      if (!isEmpty(c.childComments) && !isEmpty(c.childComments.records)) {
        c.childComments.records.forEach(cc => {
          c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
          cc.commentContent = faceReg(cc.commentContent);
          cc.commentContent = pictureReg(cc.commentContent);
        });
      }
    }
  });
}


async function getComments(pagination, floorComment = {}, isToPage = false) {
  if(getToken()){
    let axiosResponse = await listComment(pagination);
    if (!isEmpty(axiosResponse)) {
      if (isEmpty(floorComment)) {
        comments.value = axiosResponse.data;
        total.value = axiosResponse.data.length;
        emoji(comments.value, true);
      } else {
        if (isToPage === false) {
          floorComment.childComments = axiosResponse.data;
        } else {
          floorComment.childComments.total = axiosResponse.data.total;
          floorComment.childComments.records = floorComment.childComments.records.concat(axiosResponse.data.records);
        }
        emoji(floorComment.value.childComments.records, false);
      }
    }
  }
  console.log(comments.value,"comments")
}

function addGraffitiComment(graffitiComment) {
  submitComment(graffitiComment);
}

async function submitComment(commentContent) {
  let comment = {
    source: props.source,
    type: props.type,
    commentContent: commentContent
  };
  await addComment(comment)
  ElMessage({
    type: 'success',
    message: '保存成功！'
  });
  pagination.value = {
    current: 1,
    size: 10,
    total: 0,
    source: props.source,
    type: props.type,
    floorCommentId: null
  }
  await getComments(pagination.value);
  // getTotal();
}

function submitReply(commentContent) {
  let comment = {
    source: props.source,
    type: props.type,
    floorCommentId: floorComment.value.id,
    commentContent: commentContent,
    parentCommentId: replyComment.value.id,
    parentUserId: replyComment.value.userId
  };

  addComment(comment)
    .then((res) => {
      let pagination = {
        current: 1,
        size: 5,
        total: 0,
        source: props.source,
        type: props.type,
        floorCommentId: floorComment.value.id
      }
      getComments(pagination, floorComment.value);
      // getTotal();
    })
    .catch((error) => {
      ElMessage({
        message: error.message,
        type: "error"
      });
    });
  handleClose();
}

function replyDialog(comment, floorComment) {
  replyComment.value = comment;
  floorComment.value = floorComment;
  replyDialogVisible.value = true;
}

function handleClose() {
  replyDialogVisible.value = false;
  floorComment.value = {};
  replyComment.value = {};
}

onMounted(() => {
  pagination.value = {
    current: 1,
    size: 10,
    total: 0,
    source: props.source,
    type: props.type,
    floorCommentId: null
  }

  getComments(pagination.value);
  // getTotal();
})
</script>

<style scoped>

  .comment-head {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    margin: 40px 0 20px 0;
    user-select: none;
    color: var(--themeBackground);
  }

  .commentInfo-title {
    margin-bottom: 20px;
    color: var(--greyFont);
    user-select: none;
  }

  .commentInfo-detail {
    display: flex;
  }

  .commentInfo-avatar {
    border-radius: 5px;
  }

  .commentInfo-username {
    color: var(--orangeRed);
    font-size: 16px;
    font-weight: 600;
    margin-right: 5px;
  }

  .commentInfo-username-small {
    color: var(--orangeRed);
    font-size: 14px;
    font-weight: 600;
    margin-right: 5px;
  }

  .commentInfo-master {
    color: var(--green);
    border: 1px solid var(--green);
    border-radius: 0.2rem;
    font-size: 12px;
    padding: 2px 4px;
    margin-right: 5px;
  }

  .commentInfo-other {
    font-size: 12px;
    color: var(--greyFont);
    user-select: none;
  }

  .commentInfo-reply {
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    color: var(--white);
    background: var(--themeBackground);
    border-radius: 0.2rem;
    padding: 3px 6px;
  }

  .commentInfo-content {
    margin: 15px 0 25px;
    padding: 18px 20px;
    background: var(--commentContent);
    border-radius: 12px;
    color: var(--black);
    word-break: break-word;
  }

  .pagination-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
  }

  .pagination {
    padding: 6px 20px;
    border: 1px solid var(--lightGray);
    border-radius: 3rem;
    color: var(--greyFont);
    user-select: none;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
  }

  .pagination:hover {
    border: 1px solid var(--themeBackground);
    color: var(--themeBackground);
    box-shadow: 0 0 5px var(--themeBackground);
  }


  .comment-item {
    border-left: 1px solid #ccc;
    padding-left: 10px;
    margin-top: 10px;
  }
  .comment-content {
    margin-bottom: 10px;
  }

</style>
